import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Layout, theme, Button, Modal } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, BellFilled } from '@ant-design/icons';


import type { MenuProps } from 'antd';
import { Dropdown, message, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons'
// import type { MenuProps } from 'antd';
const { Header } = Layout;

export default function Title(props) {
    const navigate = useNavigate()

    const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken();
    const [collapsed, setCollapsed] = useState(false);




    const onClick: MenuProps['onClick'] = ({ key }) => {
        if (key === '4') {
            showModal()
        }
    };

    const items: MenuProps['items'] = [
        {
            label: '我的账号',
            key: '1',
        },
        {
            label: '详细信息',
            key: '2',
        },
        {
            label: '关于我们',
            key: '3',
        },
        {
            label: '退出登录',
            key: '4',
        },
    ];



    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);

    const showModal = () => {
        setOpen(true);
    };

    const handleOk = () => {
        navigate('/login')
        localStorage.clear()
        message.info(`已退出登录`);
    };

    const handleCancel = () => {
        setOpen(false);
        message.info(`操作成功`);
    };




    const headerStyle: React.CSSProperties = {
        width: "100%",
        color: '#000',
        height: '1.2rem',
        marginBottom: 10,
        lineHeight: '1.2rem',
        backgroundColor: '#fff',
        position: 'fixed',
        top: 0,
        fontSize: '0.3rem',
        display: 'flex',
        justifyContent: 'space-between'
    };


    const { updatacollapsed, name } = props
    const updata = () => {
        setCollapsed(!collapsed)
        updatacollapsed(!collapsed)
    }





    return (
        <div>
            <Header style={headerStyle}>
                <div style={{ width: '7rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                        Axlab 社区团购管理中心
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => {
                                updata()
                            }}
                            style={{
                                fontSize: '0.3rem',
                                width: 64,
                                height: 64,
                            }}
                        />
                    </div>
                    <div style={{ color: 'rgb(153,153,153)', fontSize: '0.24rem' }}>
                        首页/人员管理/添加人员
                    </div>
                </div>
                <div>
                    <Dropdown menu={{ items, onClick }}>
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                <BellFilled />
                            </Space>
                        </a>
                    </Dropdown>
                    &nbsp;&nbsp;&nbsp;
                    {name}
                </div>
            </Header>
            <Modal
                title="退出登录"
                open={open}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                cancelText={'取消'}
                okText={'确定'}
            >
                <p>您确定要退出登录吗？</p>
            </Modal>
        </div>
    )
}
